@extends('user.layouts.head')
@section('content')
    <body>
    <div id="app">
        <div class="wrapper -header-fixed">

        @include('user.layouts.navbar')
        @include('user.layouts.sidebar')

        <!-- 内容页开始-->
            <div class="content-container">
                <div class="container-fluid">
                    <div class="page-content">

                        <nav aria-label="breadcrumb">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">仪表盘</a></li>
                                <li class="breadcrumb-item"><a href="{{ route('mailbox.index') }}">站内信</a></li>
                                <li class="breadcrumb-item active" aria-current="page">回复</li>
                            </ol>
                        </nav>

                        <div class="card">
                            <div class="card-body">

                                <div class="row">

                                    <div class="col-lg-12">
                                        <div class="input-group mb-4">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text">收件人</span>
                                            </div>
                                            <input type="text" class="form-control" id="username">
                                        </div>
                                    </div>
                                    <div class="col-lg-12">
                                        <div class="input-group mb-4">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text">主&nbsp&nbsp&nbsp&nbsp题</span>
                                            </div>
                                            <input type="text" class="form-control" id="title">
                                        </div>
                                    </div>
                                    <div class="col-lg-12">
                                        <div class="form-group">
                                            <textarea class="form-control" style="resize: none; height: auto;" rows="4" id="contents"></textarea>
                                        </div>
                                    </div>

                                    <div class="col-lg-12">
                                        <div class="form-group">
                                            <button class="btn btn-primary" onclick="submit()">发送</button>
                                        </div>
                                    </div>

                                </div> <!-- .row -->
                            </div> <!-- .card-body -->
                        </div> <!-- .card -->

                    </div> <!-- .page-content -->
                </div> <!-- .container-fluid -->
            </div> <!-- .content-container -->
        </div> <!-- .wrapper -->
    </div> <!-- #app -->
    <script src="{{ mix('js/app.js') }}"></script>
    <script src="{{ asset('/js/main.js') }}"></script>
    <script>

        let isLoading = false;

        //提交
        function submit() {

            if (!$('#username').val()) {
                toast('收件人 不能为空');
                return false
            }
            if (!$('#title').val()) {
                toast('主题 不能为空。');
                return false
            }
            if (!$('#contents').val()) {
                toast('内容 不能为空。');
                return false
            }

            if (isLoading === false) {
                isLoading = true;

                axios.post(' {{ route('mailbox.store') }} ', {
                    username: $('#username').val(),
                    title: $('#title').val(),
                    contents: $('#contents').val(),
                })
                    .then(function (response) {
                        isLoading = false;
                        toast(response.data.message);
                    })
                    .catch(function (error) {
                        isLoading = false;
                        $.each(error.response.data.errors, function (index, object) {
                            toast(object[0]);
                            return false;
                        });
                    })
            }
        }
    </script>
    </body>

@endsection
